<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/discovery.css" />
	<style>
		.no_more {
			text-align: center;
			color: #999;
			font-size: .65rem;
			padding: 1rem
		}
	</style>
</head>

<body class="white">
	<div id='app' style="display:none" v-show="true" class="point_his">
		<ul class="point_list">
			<li :class='{year:item.dateYear}' v-for="(item,index) in items">
				<span v-if='item.dateYear'>{{item.dateYear}}年</span>
				<!-- <span style="font-weight: normal;" v-if='item.dateDay && item.dateMonth ' >{{item.dateDay}}/<i>{{item.dateMonth}}月</i></span> -->
				<span style="font-weight: normal;" v-if='item.dateDay && item.dateMonth ' v-html="formatDate(item.createTime)"></i></span>
				<ul>
					<li>{{item.operateName}}<span>+{{item.pointNum}}分</span></li>
				</ul>
			</li>
			<div v-if="isLastPage" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
		</ul>
		<transition name="fade">
			<spinner v-if="loading"></spinner>
		</transition>
	</div>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				items: [],
				itemsYear: [],
				itemDayAndMonth: [],
				loading: false,
				pageNum: 1,
				pageSize: 20,
				isLastPage: false
			},
			mounted: function() {
				var $this = this;
				apiready = function() {
					api.parseTapmode();
					$this.getList();

					onScrollToBottom(function () {
						if ($this.isLastPage) return;
						$this.getList();
					})

					api.setRefreshHeaderInfo({
						bgColor: '#f5f5f9',
						textColor: '#aaa',
						textDown: '下拉刷新...',
						textUp: '松开刷新...'
					}, function(ret, err) {
						$this.pageNum = 1;
						$this.isLastPage = false;
						$this.getList(true)
					});
				}
			},
			methods: {
				getList(refresh) {
					var $this = this;
					if ($this.loading) return;
					$this.loading = true;
					post('/client/point/pointHistory', {
						'pageNum': $this.pageNum,
						'pageSize': $this.pageSize
					}, function(ret) {
						if (refresh) {
							api.refreshHeaderLoadDone();
							$this.items = [];
							$this.itemDayAndMonth = [];
							$this.itemsYear = [];
						}
						$this.loading = false;
						ret.data.list.forEach(function(item) {
							var rs = $this.itemsYear.find(function(itemYear) {
								return itemYear === item.dateYear;
							})
							var rs2 = $this.itemDayAndMonth.find(function(itemDandM) {
								return itemDandM === (item.dateDay + "/" + item.dateMonth);
							});
							if (!rs2) {
								$this.itemDayAndMonth.push(item.dateDay + "/" + item.dateMonth);
							} else {
								item.dateDay = '';
								item.dateMonth = '';
							}
							if (!rs) {
								$this.itemsYear.push(item.dateYear)
							} else {
								item.dateYear = '';
							}

							$this.items.push(item);
						});
						$this.pageNum++;
						if (ret.data.isLastPage) {
							$this.isLastPage = true;
							return;
						}
					});

				},
				toTop: function() {
					api.pageUp({
						'top': true
					}, function() {})
				},
				formatDate: function(time) {
					if (!time) return '';
					var now = new Date();

					var dateTime = new Date(time.replace(/\-/g, '/'));
					var date = new Date(time.replace(/\-/g, '/').split(' ')[0]);
					var today = new Date((new Date).toJSON().split('T')[0].replace(/\-/g, '/'));
					var dayTime = today - date;

					if (now.getFullYear() == time.substr(0, 4) &&
						(now.getMonth() + 1) == time.substr(5, 2) &&
						now.getDate() == time.substr(8, 2)) return '今天';

					if (dayTime < 1000 * 60 * 60 * 24 * 2) {
						return '昨天'
					}
					return time.substr(8, 2) + '/<i>' + (+time.substr(5, 2)) + '月</ii>';
				}
			}
		});
	</script>
</body>

</html>
